<template>
  <div class="faqi">
    <div>
      <img src="/imgs/help1.jpg"
           alt=""
           class="img">
    </div>
    <div class="biao">
      <ul>
        <li>您的姓名：<el-input v-model="true_name"
                    placeholder="填写您的姓名"
                    style="width: 300px" /></li>
        <li>联系方式：<el-input v-model="phone"
                    placeholder="填写您的手机号"
                    style="width: 300px" /></li>
        <li>流浪宠物地址：<el-input v-model="address"
                    style="width: 300px"
                    placeholder="说明详细地址" /></li>
        <li>种&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类：<el-tree-select v-model="value"
                          :data="data"
                          :render-after-expand="false"
                          style="width: 120px" /></li>
        <li>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：<el-input v-model="remark"
                    style="width: 300px"
                    autosize
                    type="textarea"
                    placeholder="简单说明宠物情况" /></li>
        <li class="scimg">上传一张现场图片：
          <el-upload ref="fileList"
                     v-model="fileList"
                     :action="`http://localhost:3000/api/jiuimg?user=${user}`"
                     list-type="picture-card"
                     :on-preview="handlePictureCardPreview"
                     :on-remove="handleRemove"
                     :limit="1"
                     name="files"
                     :auto-upload="false">
            <!-- <el-button type="primary"> -->
            <el-icon>
              <Plus />
            </el-icon>
            <!-- </el-button> -->
          </el-upload>

          <el-dialog v-model="dialogVisible">
            <img width="100%"
                 :src="dialogImageUrl"
                 alt="" />
          </el-dialog>

        </li>
        <p class="lyanniu"
           @click="faqi()">发起救助</p>
      </ul>
    </div>
    <el-dialog v-model="centerDialogVisible"
               width="500"
               title="是否确定发起救助？"
               center
               :align-center='true'>
      <span>

      </span>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary"
                     @click="queding()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>



<script>
import { onMounted, ref } from 'vue'
import { ElMessage, ElLoading } from 'element-plus'
import axios from '@/axios'
import { useRouter } from 'vue-router'
export default {
  components: {},
  setup() {
    const router = useRouter()
    //  姓名
    let true_name = ref('')
    //手机号
    let phone = ref('')
    const phonety = /^1[3456789]\d{9}$/
    //地址
    let address = ref('')
    //备注
    let remark = ref('')
    let username = localStorage.getItem('username')
    //是否发起救助
    let centerDialogVisible = ref(false)
    let faqi = () => {
      if (true_name.value == '') {
        useMsg('姓名不能为空', 'error')
      } else if (phone.value == '' || phonety.test(phone.value) == false) {
        useMsg('手机号错误，请填写正确的手机号', 'error')
      } else if (address.value == '') {
        useMsg('地址不能为空', 'error')
      } else if (remark.value == '') {
        useMsg('备注不能为空', 'error')
      } else {
        centerDialogVisible.value = true
      }
    }
    let queding = () => {
      axios
        .post('/jiuzhu', {
          true_name: true_name.value,
          username: username,
          phone: phone.value,
          address: address.value,
          remark: remark.value,
          breed: value.value
        })
        .then((d) => {
          // console.log(d)
          user.value = d.insertId
          fileList.value.submit()
          const loading = ElLoading.service({
            lock: true,
            text: '救助发布中...',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          setTimeout(() => {
            loading.close()
            ElMessage({
              message: '救助发布成功',
              type: 'success'
            })
            true_name.value = ''
            phone.value = ''
            address.value = ''
            remark.value = ''
            value.value = '其他'
            router.replace('/help/dengdai')
            localStorage.setItem('jiuz', 2)
            centerDialogVisible.value = false
          }, 2000)
        })
        .catch((err) => console.log(err))
    }
    //救助宠物id
    let user = ref('')
    let useMsg = function (a, b) {
      return ElMessage({
        message: a,
        type: b,
        offset: 150,
        duration: 5000,
        center: true
      })
    }
    //种类
    let value = ref('其他')
    const data = [
      {
        value: '其他',
        label: '其他'
      },
      {
        value: '狗狗',
        label: '狗狗'
      },
      {
        value: '猫咪',
        label: '猫咪'
      }
    ]
    //图片上传
    let fileList = ref()
    let dialogImageUrl = ref('')
    let dialogVisible = ref(false)
    let handleRemove = (file, fileList) => {
      console.log(file, fileList)
      // 可以在这里添加额外的删除逻辑，比如从服务器删除文件等
    }
    let handlePictureCardPreview = (file) => {
      dialogImageUrl.value = file.url
      dialogVisible.value = true
    }
    onMounted(() => {})

    return {
      true_name,
      phone,
      address,
      remark,
      value,
      data,
      user,
      fileList,
      dialogImageUrl,
      dialogVisible,
      handleRemove,
      handlePictureCardPreview,
      useMsg,
      centerDialogVisible,
      faqi,
      queding,
      username
    }
  }
}
</script>

<style scoped lang="less">
.faqi {
  .img {
    width: 1200px;
    height: 500px;
    margin: 20px 0 0;
  }
  .biao {
    padding: 0 40px 80px;
    margin: 0 0 40px 0;
    border: #cdbf62 2px dashed;
    border-radius: 20px;
    li {
      margin: 10px 0;
      display: flex;
      align-items: center;
    }
    .lyanniu {
      margin: 10px 0 0 165px;
      width: 60%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      background-color: #fff;
      border-bottom: #cdbf62 3px solid;
      border-top: #cdbf62 1px dashed;
      border-left: #cdbf62 1px solid;
      border-right: #cdbf62 1px solid;
      border-radius: 15px;
      font-size: 20px;
      font-weight: 700;
      color: #cdbf62;
      cursor: pointer;
    }
  }
}
</style>

